<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" href="../../css/animate.css">
		<link rel="stylesheet" href="../../iconfont/iconfont.css">
		<link rel="stylesheet" href="../../css/mescroll.css">
		<link rel="stylesheet" href="../../css/gloab.css">
		<title>我要上头条</title>
		<style media="screen">
			input {
    display: inline-block;
    vertical-align: middle;
    /* 当成为行内块元素时它就可以垂直居中了 */
    width: 15px;
    height: 15px;
    -webkit-appearance: none;
    /* 清除原有的样式 */
    background-color: transparent;
    border: 0;
    outline: 0 !important;
    /* 去掉点击后外面可能会出现的蓝框 */
    line-height: 15px;
    color: #d8d8d8;
    }
    input:after {
    /* //在input的内容之后插入新内容 */
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    text-align: center;
    line-height: 8px;
    font-size: 10px;
    color: #fff;
    border: 4px solid #ddd;
    background-color: #fff;
    box-sizing: border-box;
    /* 规定两个并排的带边框的框 */
    }
    input:checked:after {
    /* 选中之后的样子 */
    content: "L";
    transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);
    /* 2D变换旋转，还有平移和缩放，平时旋转用rotate，这个写法是比较复杂一点的写法，
    括号里面的六个值来得矩阵，实现2D变换，更详细的大家去百度查。 */
    -webkit-transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);
    border-color: #3f80cc;
    background-color: #3f80cc;
    }
  </style>
	</head>
	<body>
		<div id="app">
			<div id="public-header">
				<div id="statusbar"></div>
				<header class="public-header">
					<div class="public-header-lf iconfont icon-fanhui" @click="javascript:api.closeWin();"></div>
					<div class="public-header-title">我要上头条</div>
				</header>
			</div>
			<div class="wystt">
				<div class="wystt-choose-text">
					<div class="wystt-choose-text-title">请选择哪条广告上头条</div>
					<div class="wystt-choose-text-list">
						<div class="wystt-choose-text-son flex wrap" v-for="(item,index) in adList">
							<div class="wystt-choose-text-son-lf">
								<input type="radio" name="adValue" :value="item.id" v-model="ad">
							</div>
							<div class="wystt-choose-text-son-rt" :style="(adList.length-1)==index?'border:none':''" v-if="item.content"
							 v-html="item.content"></div>
						</div>
					</div>
				</div>
				<div class="wystt-choose-text">
					<div class="wystt-choose-text-title">请选择固顶天数</div>
					<div class="wystt-choose-text-list flex wrap" v-if="config&&config.length>0">
						<div class="wystt-choose-text-son1" v-for="(item,index) in config" :style="index%3==0?'width:30%;':'margin-left:5%;width:30%;'">
							<input type="radio" name="days" :value="item.day" v-model="days" @change="getPrice(item.price,item.day)">
							<span style="display:inine-block;width:100%;">{{item.day}}天</span>
						</div>
					</div>
				</div>
				<div class="add-modify" id="add-modify" style="z-index:9;display:none;">
					<div class="wkwts-modify-center">
						<p>固顶位置已满，最近的5个到期时间如下：</p>
						<div class="wkwts-modify-center-list" v-if="queue&&queue.length>0">
							<div class="wkwts-modify-center-son" v-for="(item,index) in queue"><span></span>&nbsp;{{item.toutiao_endtime}}</div>
						</div>
						<div class="wkwts-modify-center-btns flex wrap">
							<!-- <div class="wkwts-modify-center-btns-lf" @click="tixing">稍后提醒</div> -->
							<div class="wkwts-modify-center-btns-lf" style="margin:auto;background-color:#4f93ed;" @click="tixing">去购买</div>
						</div>
					</div>
				</div>
				<p style="font-size:0.3rem;text-align:center;margin-top:0.86rem;font-weight:bold;">最快固顶时间</p>
				<p style="font-size:0.26rem;text-align:center;color:#f00;" v-if="queue&&queue.length>0">{{queue1.toutiao_endtime}}</p>
				<p style="font-size:0.26rem;text-align:center;color:#292929;" v-if="queue.length<=0">立刻</p>
				<div class="wystt-pay-btn" @click="pay">立即支付(￥{{price}})<font style="text-decoration:line-through;">￥{{day}}</font>
				</div>
			</div>
		</div>
		<div class="public-progress" style="z-index:9;">
			<img src="../../icon/icon150x150.png" alt="" class="animated infinite flash" style="width:200px;height:200px;display:block;margin:200px auto;">
		</div>
	</body>
	<script src="../../script/api.js"></script>
	<script src="../../script/jquery.js"></script>
	<script src="../../script/mescroll.js"></script>
	<script src="../../script/vue.js"></script>
	<script src="../../script/app.js"></script>
	<script src="../../script/jsencrypt.js"></script>
	<script src="../../script/fastclick.js"></script>

	<script>
		var vm;
		var mescroll;
		var mySwiper;
		apiready = function() {
			api.removeLaunchView();
			setBar("statusbar");
			setFont(750);
			startVue();
			$(".public-progress").fadeOut(1000);
			setTimeout(function() {
				$(".public-progress").css({
					"display": "none"
				});
			}, 1000);
		}

		function startVue() {
			vm = new Vue({
				el: "#app",
				data: {
					gdtt: ["", "", "", ""],
					num1: 0,
					adList: [],
					ad: '',
					config: [],
					days: '',
					price: '',
					prices: '',
					headline_rebate: '',
					queue: [],
					queue1: '',
					Identity: '',
					day: ''
				},
				created: function() {
					this.getAdList();
					this.gudingConfig();
					this.retrieve();
					this.getUserInfo();
				},
				methods: {
					changead: function(index) {
						vm.ad = index;
					},
					changeday: function(index) {
						vm.days = index;
					},
					tixing: function() {
						$('#add-modify').css({
							'display': 'none'
						});
					},
					//立即支付
					pay: function() {
						if (vm.price == "") {
							console.log("你好")
							msg('请选择固定天数');
							return;
						}
						console.log(vm.ad);
						console.log(vm.days);
						api.ajax({
							url: apiUrl + '/api/user/buyDays',
							method: 'post',
							data: {
								values: {
									id: vm.ad,
									token: $api.getStorage('token'),
									day: vm.days,
									type: 'toutiao'
								},
							}
						}, function(ret, err) {
							console.log(JSON.stringify(ret))
							if (ret.code == 1) {
								api.toast({
									msg: '订单已提交，请前往支付',
									duration: 2000,
									location: 'middle'
								});
								setTimeout(function() {
									api.openWin({
										name: 'pay',
										url: '../home/pay.html',
										pageParam: {
											// nickname:vm.nickname,
											release_price: vm.price,
											types: 11,
											type: 7,
											ad_id: ret.data,
											ad: vm.ad,
										}
									});
								}, 500);
							} else {
								api.toast({
									msg: ret.msg,
									duration: 2000,
									location: 'middle'
								});
							}
						});
					},
					// 查看当前排队情况
					retrieve: function() {
						api.ajax({
							url: apiUrl + '/api/index/fixedtopqueue',
							method: 'post',
							data: {
								values: {},
							}
						}, function(ret, err) {
							console.log("nhao")
							if (ret.code == 0) {
								vm.queue = ret.data;
								console.log(JSON.stringify(vm.queue))
								vm.queue1 = vm.queue[vm.queue.length - 1];
								$('#add-modify').css({
									'display': 'block'
								});
							} else if (ret.code == 1) {
								vm.queue = "";
								$('#add-modify').css({
									'display': 'none'
								});
							} else {
								api.toast({
									msg: ret.msg,
									duration: 2000,
									location: 'middle'
								});
							}
						});

					},
					//获取置顶费用
					getPrice: function(index, day) {
						vm.price = index;
						vm.prices = index;
						vm.day = parseInt(day * 50);
						/* if (vm.Identity==2) {
						  vm.prices = (vm.config[vm.days].price*vm.headline_rebate/100).toFixed(2);
						}else{ 
						}*/
					},
					// 固顶配置
					gudingConfig: function() {
						api.ajax({
							url: apiUrl + '/api/index/fixedtopsetting',
							method: 'post',
							data: {
								values: {},
							}
						}, function(ret, err) {
							console.log(JSON.stringify(ret))
							if (ret.code == 1) {
								vm.config = ret.data;
								/* vm.headline_rebate = ret.headline_rebate; */
								// vm.getPrice(index=0);
							} else {
								vm.config = ret.data;
								/*  vm.headline_rebate = ret.headline_rebate; */
							}
						});
					},
					//获取最新发布的五条广告
					getAdList() {
						var that = this;
						that.ad = api.pageParam.index;
						api.ajax({
							url: apiUrl + '/api/user/zone',
							method: 'post',
							data: {
								values: {
									token: $api.getStorage('token')
								},
							}
						}, function(ret, err) {
							if (ret.code == 1) {
								vm.adList = ret.data.list;
							} else {
								vm.adList = ret.data.list;
								var dialogBox = api.require('dialogBox');
								dialogBox.alert({
									texts: {
										content: '你还未发布广告，不能进行头条固顶操作，请先去发布广告',
										leftBtnTitle: '取消',
										rightBtnTitle: '确认'
									},
									styles: {
										bg: '#fff',
										w: 300,
										corner: 2,
										content: {
											color: '#000',
											size: 14
										},
										left: {
											marginB: 7,
											marginL: 20,
											w: 130,
											h: 35,
											corner: 2,
											bg: '#fff',
											size: 12
										},
										right: {
											marginB: 7,
											marginL: 10,
											w: 130,
											h: 35,
											corner: 2,
											bg: '#fff',
											size: 12
										}
									}
								}, function(ret) {
									var dialogBox = api.require('dialogBox');
									if (ret.eventType == 'left') {
										dialogBox.close({
											dialogName: 'alert'
										});
									} else if (ret.eventType == 'right') {
										dialogBox.close({
											dialogName: 'alert'
										});
										api.openWin({
											name: 'fabu',
											url: '../home/fabu.html',
											pageParam: {
												name: 'test'
											}
										});

									}
								});
							}
						});
					},
					getUserInfo: function() {
						api.ajax({
							url: apiUrl + 'api/users/getUserInfo',
							method: 'post',
							data: {
								values: {
									uid: post_en($api.getStorage('uid')),
								},
							}
						}, function(ret, err) {
							if (ret.status) {
								vm.Identity = ret.data['Identity'];
							} else {
								vm.Identity = '';
							}
						});

					},
				}
			})
		}
	</script>
</html>
